<template>
  <div class="app-container">
    <!-- 头部 -->
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findData" />
    <div class="flex">
      <el-card shadow="never" :body-style="{ padding: '11px 20px' }" class="mt10">
        <div slot="header" class="f16">
          <span style="font-weight: 600">库存资料</span>
        </div>
        <Table :tableData="tableData" :tableHeader="tableHeader" :TableHeight="510" />
      </el-card>
      <div class="flex" style="flex-direction: column">
        <el-card shadow="never" :body-style="{ padding: '11px 20px' }" class="mt10">
          <div slot="header" class="f16">
            <span style="font-weight: 600">入库单据查询</span>
          </div>
          <Table :tableData="tableData2" :tableHeader="tableHeader2" />
        </el-card>
        <el-card shadow="never" :body-style="{ padding: '11px 20px' }">
          <div slot="header" class="f16">
            <span style="font-weight: 600">出库单据查询</span>
          </div>
          <Table :tableData="tableData3" :tableHeader="tableHeader3" />
          <PageModule :PageData="{ pageSizeShow: true }" />
        </el-card>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'MaterialInventoryInquiry'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const formList = ref([
  {
    type: 'select',
    selectValue: '大类',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材质',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入规格',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入颜色',
    inputValue: ''
  },
  {
    type: 'date',
    dateLabel: '出入库日期',
    dateValue: ''
  },
  {
    type: 'checkbox',
    checkboxLabel: '公用'
  },
  {
    type: 'checkbox',
    checkboxLabel: '非公用'
  },
  {
    type: 'checkbox',
    checkboxLabel: '库存>0'
  },
  {
    type: 'checkbox',
    checkboxLabel: '全部'
  },
  {
    type: 'button',
    checkboxLabel: '清空'
  },
  {
    type: 'button',
    checkboxLabel: '导出查询资料'
  }
])
const findData = (data: any) => {
  console.log(data)
}
// 表格数据
const tableData = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
    customer: 'jzy',
    checkboxArrange: true
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  }
]

const tableHeader = ref([
  {
    label: '料号',
    prop: 'customer',
    width: '85px'
  },
  {
    label: '材质',
    prop: 'instruction',
    width: '173px'
  },
  {
    label: '颜色',
    prop: 'shape',
    width: '85px'
  },
  {
    label: '规格',
    prop: 'shape',
    width: '85px'
  },
  {
    label: '单位',
    prop: 'shape',
    width: '85px'
  },
  {
    label: '库存数量',
    prop: 'shape',
    width: '85px'
  }
])

// 底部表格数据
const tableData1 = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  }
]

const tableHeader1 = ref([
  {
    label: '指令',
    prop: 'customer',
    width: '77px'
  },
  {
    label: '型体',
    prop: 'instruction',
    width: '77px'
  },
  {
    label: '入库量',
    prop: 'instruction',
    width: '77px'
  },
  {
    label: '出库量',
    prop: 'instruction',
    width: '77px'
  }
])

// 底部表格数据
const tableData2 = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  }
]

const tableHeader2 = ref([
  {
    label: '单据号',
    prop: 'customer',
    width: '77px'
  },
  {
    label: '单据日期',
    prop: 'instruction',
    width: '77px'
  },
  {
    label: '单据类型',
    prop: 'instruction',
    width: '77px'
  },
  {
    label: '入库数量',
    prop: 'instruction',
    width: '77px'
  },
  {
    label: '库存位置',
    prop: 'instruction',
    width: '77px'
  },
  {
    label: '采购员',
    prop: 'instruction',
    width: '77px'
  }
])
const tableData3 = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  }
]

const tableHeader3 = ref([
  {
    label: '单据号',
    prop: 'customer',
    width: '77px'
  },
  {
    label: '单据日期',
    prop: 'instruction',
    width: '77px'
  },
  {
    label: '单据类型',
    prop: 'instruction',
    width: '77px'
  },
  {
    label: '入库数量',
    prop: 'instruction',
    width: '77px'
  },
  {
    label: '库存位置',
    prop: 'instruction',
    width: '77px'
  }
])
</script>

<style lang="less" scoped>
// 主体样式
.ProductionDynamicMain {
  width: 100%;
  height: 670px;
  margin-top: 20px;

  .ProductionDynamicMainCard {
    width: 100%;
    height: 100%;
    box-shadow: none;
  }
}

.ProductionDynamicMainCardMain {
  width: 98%;
  height: 600px;
  display: flex;
  margin: auto;

  .ProductionDynamicMainCardMainLeft {
    width: 60%;
    height: 100%;
  }

  .ProductionDynamicMainCardMainRight {
    width: 20%;
    height: 100%;
  }

  .ProductionDynamicMainCardMainRightT {
    width: 20%;
    height: 100%;
  }
}

.ProductionDynamicMainCardBottom {
  width: 98%;
  height: 110px;
  margin: auto;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.MainLeftCardH1 {
  font-size: 16px;
  margin: 10px 0 10px 0;
}

.ProductionDynamicMainCardBottomBtn {
  margin-top: 30px;
}

.ProductionDynamicMainCardMainRightTDivOne {
  width: 100%;
  height: 45%;
}

.ProductionDynamicMainCardMainRightTDivTwo {
  margin-top: 18px;
  width: 100%;
  height: 45%;
}
</style>
